<script setup>
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {
  upLoadAvator,
  upLoadUserInfo,
  upLoadResumeInfo,
  getResumeInfo
} from '@/api/resumeRequest.js'
import { getUserBaseInfo } from '@/api/userinfo'
import { UserInfo } from '@/stores'
const userInfo = UserInfo()
const imageUrl = ref('')
const upload = ref()
const userBaseInfo = ref({
  username: '',
  sex: '',
  phone: '',
  email: '',
  id: userInfo.userid
})
const EduBackgroud = ref({
  school: '',
  faculty: '',
  major: '',
  degree: '',
  SchoolLife: []
})
const WorkEx = ref({
  enterprise: '',
  position: '',
  Time: [],
  workType: '',
  description: ''
})
const ProEx = ref({
  program: '',
  role: '',
  ProTime: [],
  programDescription: ''
})

const rules = {
  username: [{ required: true, trigger: 'blur' }]
}

const beforeAvatarUpload = () => {}
const FileChange = async (item) => {
  const formData = new FormData()
  imageUrl.value = URL.createObjectURL(item.raw)
  console.log(imageUrl.value)
  console.log(item.raw)
  formData.append('file', item.raw)
  console.log(typeof formData)
  const res = await upLoadAvator(formData)
  console.log(res)
}

const uploadBaseInfo = async () => {
  console.log(userBaseInfo.value)
  const res = await upLoadUserInfo(userBaseInfo.value)
  console.log(res)
}
// 上传教育背景
const Educlick = async () => {
  const startDate =
    EduBackgroud.value.SchoolLife[0].getFullYear() +
    '-' +
    EduBackgroud.value.SchoolLife[0].getMonth().toString().padStart(2, '0')
  const endDate =
    EduBackgroud.value.SchoolLife[1].getFullYear() +
    '-' +
    EduBackgroud.value.SchoolLife[1].getMonth().toString().padStart(2, '0')
  const WaitEdu = ref({
    school: EduBackgroud.value.school,
    faculty: EduBackgroud.value.faculty,
    major: EduBackgroud.value.major,
    degree: EduBackgroud.value.degree,
    startDate: startDate,
    endDate: endDate
  })
  const res = await upLoadResumeInfo(WaitEdu.value)
  console.log(res)
}
// 上传工作经历
const uploadEnterpriseInfo = async () => {
  const startDate =
    WorkEx.value.Time[0].getFullYear() +
    '-' +
    WorkEx.value.Time[0].getMonth().toString().padStart(2, '0')
  const endDate =
    WorkEx.value.Time[1].getFullYear() +
    '-' +
    WorkEx.value.Time[1].getMonth().toString().padStart(2, '0')
  const WaitWork = ref({
    enterprise: WorkEx.value.enterprise,
    position: WorkEx.value.position,
    workType: WorkEx.value.workType,
    description: WorkEx.value.description,
    workStartDate: startDate,
    workEndDate: endDate
  })
  const res = await upLoadResumeInfo(WaitWork.value)
  console.log(res)
}
// 上传项目经历
const uploadProgranmExInfo = async () => {
  const startDate =
    ProEx.value.ProTime[0].getFullYear() +
    '-' +
    ProEx.value.ProTime[0].getMonth().toString().padStart(2, '0')
  const endDate =
    ProEx.value.ProTime[1].getFullYear() +
    '-' +
    ProEx.value.ProTime[1].getMonth().toString().padStart(2, '0')
  const WaitProg = ref({
    program: ProEx.value.program,
    role: ProEx.value.role,
    programDescription: ProEx.value.programDescription,
    programStartDate: startDate,
    programEndDate: endDate
  })
  const res = await upLoadResumeInfo(WaitProg.value)
  console.log(res)
}

onMounted(async () => {
  const BaseInfoRes = await getUserBaseInfo()
  const infoList = BaseInfoRes.data.data
  imageUrl.value = infoList.profile
  userBaseInfo.value.username = infoList.username
  userBaseInfo.value.sex = infoList.sex
  userBaseInfo.value.phone = infoList.phone
  userBaseInfo.value.email = infoList.email

  const ResumeRes = await getResumeInfo(userInfo.userid)
  const datalist = ResumeRes.data.data
  EduBackgroud.value.school = datalist.school
  EduBackgroud.value.faculty = datalist.faculty
  EduBackgroud.value.major = datalist.major
  EduBackgroud.value.degree = datalist.degree
  EduBackgroud.value.SchoolLife.push(new Date(datalist.startDate))
  EduBackgroud.value.SchoolLife.push(new Date(datalist.endDate))

  // 工作经历
  WorkEx.value.enterprise = datalist.enterprise
  WorkEx.value.position = datalist.position
  WorkEx.value.Time.push(new Date(datalist.workStartDate))
  WorkEx.value.Time.push(new Date(datalist.workEndDate))
  WorkEx.value.workType = datalist.workType
  WorkEx.value.description = datalist.description

  //项目经历
  ProEx.value.program = datalist.program
  ProEx.value.role = datalist.role
  ProEx.value.ProTime.push(new Date(datalist.programStartDate))
  ProEx.value.ProTime.push(new Date(datalist.programEndDate))
  ProEx.value.programDescription = datalist.programDescription
})
</script>

<template>
  <div class="container">
    <el-collapse accordion>
      <el-collapse-item>
        <template #title>
          <h2>基本信息</h2>
        </template>
        <div class="edit-wrap">
          <div class="main">
            <div class="avator">
              <el-upload
                class="avatar-uploader"
                action="http://192.168.124.18:8500/api/seeker/user/uploadProfile"
                :show-file-list="false"
                accept="image/bmp,image/jpeg,image/jpg,image/png,image/webp"
                ref="upload"
                :on-success="handleAvatarSuccess"
                :limit="1"
                :on-change="FileChange"
                :before-upload="beforeAvatarUpload"
                :auto-upload="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar-img" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
            <el-form :model="userBaseInfo" :rules="rules">
              <div class="row">
                <el-form-item prop="username" label="姓名">
                  <el-input
                    v-model.lazy="userBaseInfo.username"
                    placeholder="请输入你的真实姓名"
                  ></el-input>
                </el-form-item>
                <div class="row-item">
                  <el-form-item prop="input" label="性别">
                    <el-select
                      placeholder="Select"
                      v-model="userBaseInfo.sex"
                      style="width: 240px"
                    >
                      <el-option label="男" value="男" />
                      <el-option label="女" value="女" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="row">
                <el-form-item prop="input" label="手机号">
                  <el-input
                    v-model="userBaseInfo.phone"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="input" label="邮箱" class="item-email">
                  <el-input
                    placeholder="请输入邮箱"
                    v-model="userBaseInfo.email"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div class="save">
              <el-button type="success" @click="uploadBaseInfo">保存</el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template #title>
          <h2>教育背景</h2>
        </template>
        <div class="edit-wrap">
          <div class="main">
            <el-form :model="EduBackgroud" :rules="rules">
              <div class="row">
                <el-form-item prop="input" label="学校名称">
                  <el-input
                    v-model="EduBackgroud.school"
                    placeholder="请输入学校名称"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="input" label="学院名称" class="institute">
                  <el-input
                    v-model="EduBackgroud.faculty"
                    placeholder="请输入学院名称"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item prop="input" label="主修专业">
                  <el-input
                    v-model="EduBackgroud.major"
                    placeholder="请输入专业名称"
                  ></el-input>
                </el-form-item>
                <div class="row-item">
                  <el-form-item prop="input" label="学历">
                    <el-select
                      placeholder="Select"
                      v-model="EduBackgroud.degree"
                      style="width: 240px"
                    >
                      <el-option label="本科" value="本科" />
                      <el-option label="硕士" value="硕士" />
                      <el-option label="博士" value="博士" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <el-form-item prop="input" label="就读时间">
                <el-date-picker
                  v-model="EduBackgroud.SchoolLife"
                  type="monthrange"
                  range-separator="To"
                  start-placeholder="Start month"
                  end-placeholder="End month"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div class="save">
              <el-button type="success" @click="Educlick">保存</el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template #title>
          <h2>工作经历</h2>
        </template>
        <div class="edit-wrap">
          <div class="main">
            <el-form :model="WorkEx" :rules="rules">
              <div class="row">
                <el-form-item prop="input" label="公司名称">
                  <el-input
                    v-model="WorkEx.enterprise"
                    placeholder="请输入公司名称"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="input" label="职位名称" class="jobname">
                  <el-input
                    v-model="WorkEx.position"
                    placeholder="请输入职位名称"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item prop="input" label="就职时间">
                  <el-date-picker
                    v-model="WorkEx.Time"
                    type="monthrange"
                    range-separator="To"
                    start-placeholder="Start month"
                    end-placeholder="End month"
                  >
                  </el-date-picker>
                </el-form-item>
                <div class="row-item">
                  <el-form-item prop="input" label="工作类型">
                    <el-select
                      placeholder="Select"
                      v-model="WorkEx.workType"
                      style="width: 240px"
                    >
                      <el-option label="实习" value="实习" />
                      <el-option label="全职" value="全职" />
                      <el-option label="兼职" value="兼职" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="row">
                <el-form-item prop="input" label="详细内容">
                  <el-input
                    v-model="WorkEx.programDescription"
                    :rows="7"
                    type="textarea"
                    placeholder="Please input"
                  />
                </el-form-item>
              </div>
            </el-form>
            <div class="save">
              <el-button type="success" @click="uploadEnterpriseInfo">
                保存
              </el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template #title>
          <h2>项目经历</h2>
        </template>
        <div class="edit-wrap">
          <div class="main">
            <el-form :model="ProEx" :rules="rules">
              <div class="row">
                <el-form-item prop="input" label="项目名称">
                  <el-input
                    v-model="ProEx.program"
                    placeholder="请输入项目名称"
                  />
                </el-form-item>
                <el-form-item prop="input" label="项目角色" class="prochara">
                  <el-input
                    v-model="ProEx.role"
                    placeholder="请输入你在项目中的角色"
                  />
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item prop="input" label="项目时间">
                  <el-date-picker
                    v-model="ProEx.ProTime"
                    type="monthrange"
                    range-separator="To"
                    start-placeholder="Start month"
                    end-placeholder="End month"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item prop="input" label="详细内容">
                  <el-input
                    v-model="ProEx.programDescription"
                    :rows="7"
                    type="textarea"
                    placeholder="Please input"
                  />
                </el-form-item>
              </div>
            </el-form>
            <div class="save">
              <el-button type="success" @click="uploadProgranmExInfo">
                保存
              </el-button>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;
  padding: 20 24px;
  background: #fff;
  border-radius: 12px;
  .el-collapse-item {
    padding: 10px 20px;
  }
  .edit-wrap {
    --tw-bg-opacity: 1;
    background-color: rgba(248, 248, 248, var(--tw-bg-opacity));
    border-radius: 8px;
    padding: 20px;
    .main {
      .avator {
        justify-content: center;
        margin-bottom: 28px;
        display: flex;
        -webkit-box-pack: center;
        .avatar-uploader {
          border-radius: 100%;
          display: inline-block;
          overflow: hidden;
          border: 1px dashed var(--el-border-color);
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: var(--el-transition-duration-fast);
          img {
            max-width: 178px;
            max-height: 178px;
            display: block;
          }
        }
        .avatar-uploader:hover {
          border-color: var(--el-color-primary);
        }
      }
      :deep(.el-form) {
        .row {
          -webkit-box-align: end;
          align-items: flex-end;
          display: flex;
          .el-form-item {
            -webkit-box-flex: 1;
            flex: 1 0 0;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            display: flex;
            flex-direction: column;
            margin-bottom: 22px;
            .el-form-item__label {
              align-self: flex-start;
              font-size: 12px;
              line-height: 12px;
              margin-bottom: 6px;
              padding: 0;
              text-align: right;
              vertical-align: middle;
              float: left;
              color: #333;
              box-sizing: border-box;
              height: 12px;
            }
            .el-form-item__content {
              line-height: 40px;
              position: relative;
              font-size: 14px;
              .el-input {
                display: inline-block;
                width: 100%;
                font-size: 16px;
                .el-input__wrapper {
                  display: inline-block;
                  width: 100%;
                  font-size: 16px;
                  .el-input__inner {
                    background-color: #fff !important;
                    border-radius: 8px;
                    height: 40px;
                    line-height: 40px;
                    padding-right: 30px;
                  }
                }
              }
            }
          }
          .row-item {
            margin-left: 28px;
            -webkit-box-flex: 1;
            flex: 1 0 0;
            -webkit-box-align: center;
            align-items: center;
            display: flex;
            .el-form-item {
              .el-form-item__content {
                line-height: 40px;
                position: relative;
                font-size: 14px;
                height: 40px;
                .el-select {
                  width: 100%;
                  display: inline-block;
                  position: relative;
                  .el-select__wrapper {
                    min-height: 42px;
                  }
                }
              }
            }
          }
          .item-email {
            margin-left: 28px;
          }
          .institute {
            margin-left: 28px;
          }
          .jobname {
            margin-left: 28px;
          }
          .prochara {
            margin-left: 28px;
          }
        }
      }
      .save {
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        margin-top: 30px;
        .el-button {
          margin-left: auto;
          margin-right: 56px;
          border-color: transparent;
          display: inline-block;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          border: 1px solid #ddd;
          text-align: center;
          box-sizing: border-box;
          outline: 0;
          transition: 0.1s;
          padding: 8px 16px;
          font-size: 14px;
          border-radius: 8px;
          font-weight: 400;
        }
      }
    }
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
